<template>
  <div style="display: flex;justify-content: center;">
    <div id="main" style="width: 1500px; height: 750px;"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import bus from '../../tools/eventBus'
const HeatmapData = ref([])
const HeatmapListValue = ref([])
// onMounted(echartsMap)

bus.on('Heatmap', (data) => {
  //  console.log(data.HeatmapTime,'热力图数据');
  console.log(data.HeatmapTime,'data');
  if(data.HeatmapTime[0] === data.HeatmapTime[1]){
    HeatmapData.value = [...new Set( data.HeatmapTime)];
  }else{
    HeatmapData.value = data.HeatmapTime

  }
  // HeatmapListValue.value = data.HeatmapList
  // HeatmapData.value = [...new Set( data.HeatmapTime)];
  // console.log('时间：', HeatmapData.value.length,'数据：', data.HeatmapList);
console.log(HeatmapData.value,'333');
  if(data.HeatmapTime.length === 2 && data.HeatmapTime[0] === data.HeatmapTime[1]){
    data.HeatmapList.forEach(row => {
        if (row[0] === 1) {
          row[0] = 0; // 将第一位索引值从1改为0
        }
      });
  }
  echartsMap(data.HeatmapList,  HeatmapData.value)
})

// console.log(result,'resultresultresultresult');




function echartsMap(a,b) {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  // prettier-ignore
  const hours = [
    '0', '1', '2', '3', '4', '5', '6',
    '7', '8', '9', '10', '11',
    '12', '13', '14', '15', '16', '17',
    '18', '19', '20', '21', '22', '23',
  ];

  // prettier-ignore
  const days =b
  // HeatmapData.value
  const dates = a || []
  const data = dates
    .map(function (item) {
      return [item[1], item[0], item[2] || '-'];
    });
  option = {
    
    title: {
      top: 30,
      left: 'center',
      text: '设备报警热力图'
    },
    tooltip: {
      position: 'top',
      formatter: function (params) {
      return (
        "日期：" +
        days[params.value[1]] +
        "<br/>" +
        "时间：" +
        hours[params.value[0]] +
        "<br/>" +
        " 报警次数： " +
        params.value[2]
      );
    },
    },
    grid: {
      height: '70%',
      width:'80%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: days,
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '5%'
    },
    series: [
      {
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
</script>
